<!DOCTYPE HTML>
<html>
<head>
    <title>Flask-SocketIO Test</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            namespace = '/test';
            var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
            socket.on('my_response', function (msg) {
                $('#log').append('<br>' + $('<div/>').text(msg.data).html());
            });

            var ping_pong_times = [];
            var start_time;
            window.setInterval(function () {
                start_time = (new Date).getTime();
                socket.emit('my_ping');
            }, 1000);

            socket.on('my_pong', function () {
                var latency = (new Date).getTime() - start_time;
                ping_pong_times.push(latency);
                ping_pong_times = ping_pong_times.slice(-30); // keep last 30 samples
                var sum = 0;
                for (var i = 0; i < ping_pong_times.length; i++)
                    sum += ping_pong_times[i];
                $('#ping-pong').text(Math.round(10 * sum / ping_pong_times.length) / 10);
            });


        });
    </script>
</head>
<body>
<h1>Flask-SocketIO Test</h1>
<p>Async mode is: <b>{{ async_mode }}</b></p>
<p>Average ping/pong latency: <b><span id="ping-pong"></span>ms</b></p>
<h2>Receive:</h2>
<div id="log"></div>
</body>
</html>
